<!--
 * @Author: 李煌
 * @Date: 2023-04-25 10:32:20
 * @LastEditors: 李煌
 * @LastEditTime: 2024-02-27 15:02:04
 * @Description: 审核人节点
-->
<template>
  <div class="node-wrap">
    <div
      class="node-wrap-box"
      v-if="nodeConfig"
      :class="isTried && nodeConfig.error ? 'active error' : ''"
    >
      <div @click="openDrawer(nodeConfig)">
        <div
          class="title"
          :style="`background-color:${
            $flowConfig.headerColor[nodeConfig.type]
          }`"
        >
          <span class="editable-title"
            >{{
              nodeConfig.type === 0
                ? "开始"
                : nodeConfig.type === 10
                ? "结束"
                : nodeConfig.type === 1
                ? "运营动作:目标策略"
                : "运营动作:内容策略"
            }}
            <span v-show="nodeConfig.type === 2">
              ({{ getContentType(nodeConfig) }})</span
            >
          </span>
          <i
            class="el-icon-close close"
            v-if="![$nodeType.开始, $nodeType.结束].includes(nodeConfig.type)"
            v-show="!operationType || operationType != 'check'"
            @click.stop="delNodes()"
          ></i>
        </div>
        <div class="content">
          <div
            class="placeholder text"
            v-if="[$nodeType.结束].includes(nodeConfig.type)"
          >
            无需配置
          </div>

          <div class="placeholder text" v-else-if="nodeConfig.error">
            请配置{{ nodeConfig.nodeName }}
          </div>
          <template v-else>
            <!-- <div
              v-for="(item, index) in setApproverStr()"
              :key="index"
              class="text"
            >
              {{ item }}
            </div> -->
            <div class="content_box">
              <div
                class="content_item"
                v-show="
                  nodeConfig.nodeDetail && nodeConfig.nodeDetail.strategyName
                "
              >
                <span>策略名称</span>
                <span>{{
                  (nodeConfig.nodeDetail &&
                    nodeConfig.nodeDetail.strategyName) ||
                  ""
                }}</span>
              </div>
              <div
                class="content_item"
                v-show="
                  nodeConfig.nodeDetail &&
                  nodeConfig.nodeDetail.policyType &&
                  nodeConfig.nodeDetail.policyType.length
                "
              >
                <span>执行频率</span>
                <span>{{
                  nodeConfig.nodeDetail.policyType &&
                  nodeConfig.nodeDetail.policyType.length &&
                  (nodeConfig.nodeDetail.policyType[0] == "1"
                    ? "定时型-单次"
                    : nodeConfig.nodeDetail.policyType[0] == "2"
                    ? "定时型-重复"
                    : "手动型-单次")
                }}</span>
              </div>
              <div
                class="content_item"
                v-show="nodeConfig.type === 1 || nodeConfig.type === 2"
              >
                <span>节点名称</span>
                <span>{{ nodeConfig.nodeName }}</span>
              </div>

              <div
                class="content_item"
                v-show="nodeConfig.nodeDetail && nodeConfig.nodeDetail.content"
              >
                <span>节点内容</span>
                <span>{{
                  (nodeConfig.nodeDetail && nodeConfig.nodeDetail.content) || ""
                }}</span>
              </div>
              <div
                class="content_item"
                v-show="
                  nodeConfig.nodeDetail &&
                  nodeConfig.nodeDetail.modeAccessData &&
                  nodeConfig.nodeDetail.modeAccessData.id
                "
              >
                <span>触达方式</span>
                <span>{{
                  (nodeConfig.nodeDetail &&
                    nodeConfig.nodeDetail.modeAccessData &&
                    nodeConfig.nodeDetail.modeAccessData.label) ||
                  ""
                }}</span>
              </div>
            </div>
          </template>
          <!-- <div
            class="error_tip"
            v-if="isTried && nodeConfig.error"
          >
            <i
              class="el-icon-warning"
              style="color: rgb(242, 86, 67);"
            ></i>
          </div> -->
        </div>
      </div>
    </div>
    <addNode
      v-model="nodeConfig"
      :ifNoShowBtn="
        operationType == 'check' || nodeConfig.type == $nodeType.目标
      "
      v-if="nodeConfig.type != $nodeType.结束"
    ></addNode>
  </div>
</template>

<script>
import mixin from "./mixin";
export default {
  mixins: [mixin],
  data() {
    return {
      operationType: "",
    };
  },
  mounted() {
    this.operationType = this.$route.query.type;
  },
  methods: {
    getContentType(data) {
      let text = "";
      if (data.type === 2 && data.nodeDetail) {
        let contentType = data.nodeDetail.contentType;
        text =
          contentType == "poster"
            ? "海报"
            : contentType == "article"
            ? "文章"
            : contentType == "offlineActivity"
            ? "线下活动"
            : contentType == "onlineActivity"
            ? "线上活动"
            : "";
      }
      return text;
    },
  },
};
</script>

<style lang="less" scoped>
.content {
  padding: 10px;
}
.content_box {
  // padding: 5px;
  font-size: 14px;
  .content_item {
    width: 100%;
    display: inline-flex;
    justify-content: space-between;
    align-items: center;
    span:first-child {
      font-weight: 500;
    }
  }
}
</style>
